﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery.ui.widget.js"></script>
<script src="~/Scripts/jquery.iframe-transport.js"></script>
<script src="~/Scripts/jquery.fileupload.js"></script>
<link href="~/Content/css/wxcoupon.css?v=1" rel="stylesheet" />
<style>
    .fileinput-button {
        position: absolute;
        display: inline-block;
        overflow: hidden;
    }

        .fileinput-button input {
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
            font-size: 200px;
            width: 100%;
            height: 100%;
        }

    .imgItem {
        display: inline-block;
        width: 240px;
    }
</style>
<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
    <table style="width: 100%;">
        <tr>
            <td style="width: 100%;">
                <a class="mini-button" name="SaveInfo" iconcls="icon-save" onclick="onSaveInfo" plain="true">保存</a>
                <span class="separator"></span>
                <a class="mini-button" id="close" name="close" iconcls="icon-close" onclick="CloseWindow" plain="true">关闭</a>
            </td>
        </tr>
    </table>
</div>
<form id="form1">
    <div class="items">
        <div class="item" style="height: 120px;">
            <div class="imgItem">
                <label>会员卡图片：</label>
                <input type="text" id="logoUrl" name="logoUrl" class="mini-hidden" enabled="false" required="true" width="230px" />
                <span class="btn btn-success fileinput-button" style="margin-left: 20px;">
                    <img id="logoImage" src="~/Content/Images/NoImage.jpg" width="120" height="120" />
                    <input id="logoFile" type="file" accept=".jpg,.png">
                </span>
            </div>
            <div class="imgItem">
                <label>背景图片：</label>
                <input type="text" id="backgroundPicUrl" name="backgroundPicUrl" class="mini-hidden" enabled="false" required="true" width="230px" />
                <span class="btn btn-success fileinput-button" style="margin-left: 20px;">
                    <img id="backgroundImage" src="~/Content/Images/NoImage.jpg" width="120" height="120" />
                    <input id="backgroundFile" type="file" accept=".jpg,.png">
                </span>
            </div>
        </div>
        <div class="item">
            <label>卡券名称：</label>
            <div style="position: relative; display: inline-block;">
                <span id="title_error" class="errorText" style="position: absolute; top: -35px; width: 200px;"></span>
            </div>
            <input type="text" id="title" name="title" class="mini-textbox" required="true" vtype="rangeChar:1,18" errormode="none" onvalidation="updateError"
                requirederrortext="卡券名称不能为空" width="230px" />
        </div>
        @*<div class="item">
            <label>卡券类型：</label>
            <div style="position: relative; display: inline-block;">
                <span id="cardType_error" class="errorText" style="position: absolute; top: -35px; width: 200px;"></span>
            </div>
            <input type="text" id="cardType" name="cardType" data="cardTypeData" value="CASH" class="mini-combobox" maxlength="30" required="true" errormode="none"
                onvalidation="onLeastCostValidation" requirederrortext="卡券类型不能为空" width="230px" />
        </div>
        <div class="item">
            <label>起用金额：</label>
            <input type="text" id="leastCost" name="leastCost" class="mini-textbox" maxlength="30" required="true" errormode="none" onvalidation="updateError"
                vtype="range:0,99999999;rangeChar:1,10" rangeerrortext="请输入小数" rangecharerrortext="请输入小于9位数的小数" width="230px" />
            <span id="leastCost_error" class="errorText"></span>
        </div>
        <div class="item">
            <label>减免金额：</label>
            <input type="text" id="reduceCost" name="reduceCost" class="mini-textbox" maxlength="30" required="true" errormode="none" onvalidation="updateError"
                vtype="range:0,99999999;rangeChar:1,10" rangeerrortext="请输入小数" rangecharerrortext="请输入小于9位数的小数" width="230px" />
            <span id="reduceCost_error" class="errorText"></span>
        </div>*@
        <div class="item">
            <label>使用提醒：</label>
            <input type="text" id="notice" name="notice" class="mini-textbox" maxlength="30" required="true" vtype="rangeChar:1,32" errormode="none" onvalidation="updateError"
                requirederrortext="使用提醒不能为空" width="230px" />
            <span id="notice_error" class="errorText"></span>
        </div>
        <div class="item">
            <label>特权说明：</label>
            <textarea type="text" id="prerogative" name="prerogative" class="mini-textarea" required="true" vtype="rangeChar:1,2048" errormode="none" onvalidation="updateError"
                requirederrortext="使用说明不能为空" width="230px" height="80px"></textarea>
            <span id="prerogative_error" class="errorText"></span>
        </div>
        <div class="item">
            <label>使用说明：</label>
            <textarea type="text" id="description" name="description" class="mini-textarea" required="true" vtype="rangeChar:1,2048" errormode="none" onvalidation="updateError"
                requirederrortext="使用说明不能为空" width="230px" height="80px"></textarea>
            <span id="description_error" class="errorText"></span>
        </div>
        <div class="item">
            <label>卡券库存：</label>
            <input type="text" id="quantity" name="quantity" class="mini-textbox" required="true" vtype="int" errormode="none" onvalidation="updateError"
                requirederrortext="卡券库存不能为空" interrortext="卡券库存只能输入整数" width="230px" />
            <span id="quantity_error" class="errorText"></span>
        </div>
        @*<div class="item">
        <label>使用时间的类型：</label>
        <input type="text" class="mini-combobox" required="true"/>
    </div>*@
        @*<div class="item">
            <label>开始时间：</label>
            <input id="beginTime" name="beginTime" class="mini-datepicker" format="yyyy-MM-dd H:mm:ss" timeformat="H:mm:ss" showtime="true" required="true" width="230px"
                errormode="none" onvalidation="updateError" requirederrortext="开始时间不能为空" />
            <span id="beginTime_error" class="errorText"></span>
        </div>
        <div class="item">
            <label>结束时间：</label>
            <input id="endTime" name="endTime" class="mini-datepicker" format="yyyy-MM-dd H:mm:ss" timeformat="H:mm:ss" showtime="true" required="true" width="230px"
                errormode="none" onvalidation="updateError" requirederrortext="结束时间不能为空" />
            <span id="endTime_error" class="errorText"></span>
        </div>*@
        <div id="FQrCodeUrl" style="position: absolute; right: 30px; bottom: 30px;">
            
        </div>
    </div>
    <input type="text" id="FItemID" name="FItemID" value="33" class="mini-hidden" />
    <input type="text" id="cardId" name="cardId" class="mini-hidden" value="pVItWuMkJhagPTxxvBQ5ffM1k2CI" />
</form>
<script src="~/Scripts/common.js"></script>
<script>
    var cardTypeData = [
        { "id": "CASH", "text": "代金券" },
//        { "id": "DISCOUNT", "text": "折扣券" }
    ];
    mini.parse();
    function SetInfoData(data) {
        if (data.action == "new") {
            mini.get("FItemID").setValue("0");
            mini.get("cardId").setValue("");
        }
        else {
            mini.get("FItemID").setValue(data.FItemID);
            mini.get("cardId").setValue(data.FWxCardID);
            mini.get("logoUrl").setValue(data.FLogoUrl);

            if (data.FLogoUrl != undefined && data.FLogoUrl != "")
            $("#logoImage").attr("src", data.FLogoUrl);
            mini.get("backgroundPicUrl").setValue(data.FBackgroundPicUrl);

            if (data.FBackgroundPicUrl != undefined && data.FBackgroundPicUrl != "")
            $("#backgroundImage").attr("src", data.FBackgroundPicUrl);
            mini.get("title").setValue(data.FName);
            mini.get("notice").setValue(data.FNotice);
            mini.get("description").setValue(data.FDescription);
            mini.get("quantity").setValue(data.FQuantity);
            mini.get("prerogative").setValue(data.FPrerogative);
            if (data.FQrCodeUrl != undefined && data.FQrCodeUrl != "")
                $("#FQrCodeUrl").html('<img src="' + data.FQrCodeUrl + '" style="width: 300px;"/>');
        }
    }

    function onSaveInfo() {
        var form = new mini.Form("#form1");
        form.validate();
        if (form.isValid() == false) return;
        var param = {
            FItemID: mini.get("FItemID").getValue(),
            cardId: mini.get("cardId").getValue(),
            logoUrl: mini.get("logoUrl").getValue(),
            title: mini.get("title").getValue(),
            notice: mini.get("notice").getValue(),
            description: mini.get("description").getValue(),
            quantity: mini.get("quantity").getValue(),
            prerogative: mini.get("prerogative").getValue(),
            backgroundPicUrl: mini.get("backgroundPicUrl").getValue(),
            //            beginTime: mini.get("beginTime").getText(),
            //            endTime: mini.get("endTime").getText(),
            //            cardType: mini.get("cardType").getValue(),
            //            leastCost: mini.get("leastCost").getValue(),
            //            reduceCost: mini.get("reduceCost").getValue(),
            mSystemAppID: parent.window.getSystemAppID()
        }
        postRequest("/Coupon/CareateWxMemberCard", param, function (res) {
            if (res.status == 1) {
                mini.showTips({ content: res.msg, state: "success", x: "center", y: "top", timeout: 3000 });

                $("#FQrCodeUrl").html('<img src="' + res.qrCode + '" style="width: 300px;"/>');
//                setTimeout(function () {
//                    CloseWindow();
//                }, 2000);
            } else {
                mini.showTips({ content: res.msg, state: "danger", x: "center", y: "top", timeout: 3000 });
            }
        });
    }

    function updateError(e) {
        var id = e.sender.name + "_error";
        var el = document.getElementById(id);
        if (el) {
            el.innerHTML = e.errorText;
        }
    }

    function onLeastCostValidation(e) {
        updateError(e);
    }

    function CloseWindow(action) {
        if (window.CloseOwnerWindow) window.CloseOwnerWindow(action);
        else window.close();
    }

    $(function () {

        $("#logoFile").change(function () {
            var formData = new FormData();
            formData.append("logoFile", document.getElementById('logoFile').files[0]);
            formData.append("mSystemAppID", parent.window.getSystemAppID());
            $.ajax({
                url: "/Upload/WxUploadFile",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    if (res.status == 1) {
                        $("#logoImage").attr("src", res.path);
                        mini.get("logoUrl").setValue(res.logoUrl);
                    } else {
                        mini.showTips({ content: res.msg, state: "danger", x: "center", y: "top", timeout: 3000 });
                    }
                }
            });
        });
        $("#backgroundFile").change(function () {
            var formData = new FormData();
            formData.append("backgroundFile", document.getElementById('backgroundFile').files[0]);
            formData.append("mSystemAppID", parent.window.getSystemAppID());
            $.ajax({
                url: "/Upload/WxUploadFile",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    if (res.status == 1) {
                        $("#backgroundImage").attr("src", res.path);
                        mini.get("backgroundPicUrl").setValue(res.logoUrl);
                    } else {
                        mini.showTips({ content: res.msg, state: "danger", x: "center", y: "top", timeout: 3000 });
                    }
                }
            });
        });

    });
</script>
